<template>
  <div class="goodsClassify">
    <el-button type="primary">添加分类</el-button>
    <a-table
      :columns="columns"
      :data-source="classList"
      class="components-table-demo-nested"
    >
      <template #bodyCell="{ column }">
        <template v-if="column.key === 'operation'">
          <a-button type="primary" size="small">编辑</a-button>
          <a-button size="small" danger style="margin-left: 15px"
            >删除</a-button
          >
        </template>
        <template
          slot="cat_level"
          slot-scope="text, record"
          v-if="column.key === 'cat_level'"
        >
          <a-tag color="purple">一级</a-tag>
        </template>
        <template
          slot="cat_level"
          slot-scope="text, record"
          v-if="column.key === 'cat_deleted'"
        >
          <a-tag color="green">有效</a-tag>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts" setup>
import apis from "@/http/apis";
import { Item } from "ant-design-vue/lib/menu";
import { ref } from "vue";
const columns = [
  { title: "分类名称", dataIndex: "cat_name", key: "cat_name" },
  { title: "是否有效", dataIndex: "cat_deleted", key: "cat_deleted" },
  { title: "排序", dataIndex: "cat_level ", key: "cat_level" },
  { title: "操作", key: "operation" },
];
let classList = ref([]); //分类数据数组
//初始请求函数
const initgetClasslist = async () => {
  const res: any = await apis.getClassifylist({});
  // console.log(res, "====");
  classList.value = res.data;
};
initgetClasslist();
</script>

<style lang="less" scoped></style>
